<!--基本-->
<div class="form-group">
    <label class="control-label col-xs-2">
        商品分类
        <span style="color: #FF0000;">*</span>
    </label>
    <div class="col-xs-9">
        <div class="row">
            <div class="col-xs-4">
                <select name="category_id1" id="one-item" class="chosen-select form-control"
                        onchange="changeOne()"></select>
            </div>

            <div class="col-xs-4" id="two-container">
                <select name="category_id2" id="two-item" class="form-control" onchange="changeTwo()"></select>
            </div>
            <!--隐藏三级分类-->
            <div class="col-xs-4" id="three-container" style="display:none;">
                <select class="form-control" name="category_id3" id="three-item"></select>
            </div>
        </div>
    </div>
</div>

<div id="brand_selector" style="" class="form-group">
    <label class="control-label col-xs-2">
        商品品牌
    </label>
    <div class="col-xs-9">
        <div id="brand_container" class="row">

        </div>
        <input type="hidden" name="brand_id" value="{$info.brand_id}">
    </div>
</div>
<div id="is_presell" style="" class="form-group">
    <label class="control-label col-xs-2">
        是否预售产品
    </label>
    <div class="col-xs-9">
        <select name="is_presell" class="form-control" id="presell">
            <option value="0" {if $info.is_presell eq 0}selected{/if}>否</option>
            <option value="1" {if $info.is_presell eq 1}selected{/if}>是</option>
        </select>
    </div>
</div>

<div id="presell_selector" {if $info.is_presell eq 0}style="display: none;"{/if} class="form-group">
    <label class="control-label col-xs-2">
        预售模块
    </label>
    <div class="col-xs-9">
        <div id="presell_container" class="row">
            {foreach $pre_sell as $v}
            <span data-pre_id="{$v.id}" class="pre_id brand_tag1 {if $info.presell_id eq $v.id}brand_tag_active1{/if}">{$v.title}</span>
            {/foreach}
        </div>
        <input type="hidden" name="presell_id" value="{$info.presell_id}">
    </div>
</div>
<div class="form-group">
    <label class="control-label col-xs-2">
        商品标题
        <span style="color: #FF0000;">*</span>
    </label>
    <div class="col-xs-9">
        <input type="text" class="form-control" maxlength="50" name="title" value="{$info.title}" placeholder="请输入商品标题，限50字以内" >
    </div>
</div>
<div class="form-group">
    <label class="control-label col-xs-2">
        商品短标题
        <span style="color: #FF0000;">*</span>
    </label>
    <div class="col-xs-9">
        <input type="text" class="form-control" maxlength="10" name="short_title" value="{$info.short_title}" placeholder="请输入商品短标题，限10字以内" >
    </div>
</div>
<div class="form-group">
    <label class="control-label col-xs-2">
        商品关键字
    </label>
    <div class="col-xs-9">
        <input type="text" class="form-control" maxlength="50" name="keyword" value="{$info.keyword}" placeholder="商品关键字,能准确搜到商品的,比如 : 海尔电视|电视 之类的，多个关键字用|隔开，限50字以内" >
    </div>
</div>
<div class="form-group">
    <label class="control-label col-xs-2">
        商品缩略图
        <span style="color: #FF0000;">*</span>
    </label>
    <div class="col-xs-9">
        {include file="public/singleImageUploader" uploader-name="img_url" /}
    </div>
</div>
<div class="form-group">
    <label class="control-label col-xs-2">
        默认售价
        <span style="color: #FF0000;">*</span>
    </label>
    <div class="col-xs-9">
        <input type="number" class="form-control" maxlength="11" name="price" value="{$info.price}" placeholder="请输入商品售价，精确到0.01元" >
    </div>
</div>
<div class="form-group">
    <label class="control-label col-xs-2">
        默认原价
        <span style="color: #FF0000;">*</span>
    </label>
    <div class="col-xs-9">
        <input type="number" class="form-control" maxlength="11" name="original_price" value="{$info.original_price}" placeholder="请输入商品原价，精确到0.01元" >
    </div>
</div>

<div class="form-group">
    <label class="control-label col-xs-2">
        运费计费模式
        <span style="color: #FF0000;">*</span>
    </label>
    <div class="col-xs-9">
        <select id="dispatch-type-selector" name="dispatch_type" class="form-control" tabindex="-1" >
            <option value="">
                无选择
            </option>
            {volist name="dispatch_type" id="item"}
            <option {if condition="$info.dispatch_type==$item.type"}selected{/if} value="{$item.type}">{$item.title}【{$item.desc}】</option>
            {/volist}
        </select>
    </div>
</div>

<div class="form-group">
    <label class="control-label col-xs-2">
        商品运费
    </label>
    <div class="col-xs-9">
        <input type="number" class="form-control" maxlength="11" name="dispatch_price" value="{$info.dispatch_price}" placeholder="商品运费，精确到0.01元" >
    </div>
</div>
<div class="form-group">
    <label class="control-label col-xs-2">
        平台排序
    </label>
    <div class="col-xs-9">
        <input type="number" class="form-control" maxlength="11" name="display_order" value="{$info.display_order}" placeholder="平台排序，排序号越大，商城内商品显示越靠前" >
    </div>
</div>

<div class="form-group">
    <label class="control-label col-xs-2">是否上架</label>
    <div class="col-xs-9">
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-default {if condition='$info.status == 1'}active{/if}">
                <input type="radio" name="status" id="status_1" value="1" {if condition='$info.status == 1'}checked{/if}> 上架
            </label>
            <label class="btn btn-default {if condition='$info.status == 0'}active{/if}">
                <input type="radio" name="status" id="status_0" value="0" {if condition='$info.status == 0'}checked{/if}> 下架
            </label>
        </div>
    </div>
</div>
<div class="form-group">
    <label class="control-label col-xs-2">是否热卖推荐</label>
    <div class="col-xs-9">
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-default {if condition='$info.is_index == 1'}active{/if}">
                <input type="radio" name="is_index" id="is_index_1" value="1" {if condition='$info.is_index == 1'}checked{/if}> 推荐
            </label>
            <label class="btn btn-default {if condition='$info.is_index == 0'}active{/if}">
                <input type="radio" name="is_index" id="is_index_0" value="0" {if condition='$info.is_index == 0'}checked{/if}> 不推荐
            </label>
        </div>
    </div>
</div>

<style type="text/css">
    .brand_tag{
        cursor:pointer;float:left;margin-bottom:10px;margin-left: 10px;display: block;width: 10.5%;height: 34px;padding: 6px 12px;font-size: 14px;line-height: 1.42857143;color: #555;
        background-color: #fff;background-image: none;border: 1px solid #ccc;text-align: center;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;
    }
    .brand_tag_active{border-color: #ff2222;color: #ff2222;}
    .brand_tag1{
        cursor:pointer;float:left;margin-bottom:10px;margin-left: 10px;display: block;width: 10.5%;height: 34px;padding: 6px 12px;font-size: 14px;line-height: 1.42857143;color: #555;
        background-color: #fff;background-image: none;border: 1px solid #ccc;text-align: center;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;
    }
    .brand_tag_active1{border-color: #ff2222;color: #ff2222;}
</style>
<script>

    $(function () {
        $.ajax({
            url: "{:url('Utils/queryBusCategory')}",
            type: 'POST', //GET
            async: true,    //或false,是否异步
            data: null,
            timeout: 5000,    //超时时间
            dataType: 'json',
            success: function (data, textStatus, jqXHR) {

                oneSelector.empty();
                oneSelector.append("<option selected value=''>" + "请选择" + "</option>");
                for (var i = 0; i < data.length; i++) {

                    if(data[i]['id']=='{$info.category_id1}'){
                        oneSelector.append("<option selected value='" + data[i].id + "'>" + data[i].title + "</option>");
                    }else{
                        oneSelector.append("<option value='" + data[i].id + "'>" + data[i].title + "</option>");
                    }
                }
                if (oneSelector.val() != "") {
                    changeOne();
                }
            }
        });
    });

    //一级分类选择器
    var oneSelector = $("#one-item");
    //二级分类选择器
    var twoSelector = $("#two-item");
    var twoContainer = $("#two-container");
    //三级分类选择器
    // var threeSelector = $("#three-item");
    // var threeContainer = $("#three-container");

    //更改一级分类
    function changeOne()
    {
        //清空三级分类
        // threeSelector.empty();

        if (oneSelector.val() != '')
        {
            //threeContainer.hide();
            $.ajax({
                url: "{:url('Utils/queryCategory')}",
                type: 'POST', //GET
                async: true,    //或false,是否异步
                data: {
                    parent_id: oneSelector.val()
                },
                timeout: 5000,    //超时时间
                dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                success: function (data, textStatus, jqXHR) {

                    //显示市区选择器
                    twoContainer.show();

                    twoSelector.empty();

                    twoSelector.append("<option selected value=''>" + "请选择" + "</option>");

                    for (var i = 0; i < data.length; i++) {

                        if(data[i]['id']=='{$info.category_id2}'){
                            twoSelector.append("<option selected value='" + data[i].id + "'>" + data[i].title + "</option>");
                        }else{
                            twoSelector.append("<option value='" + data[i].id + "'>" + data[i].title + "</option>");
                        }

                    }
                    if (twoSelector.val() != "") {
                        changeTwo();
                    }
                },
                error: function (xhr, textStatus)
                {
                },
                complete: function ()
                {
                }
            })
            //加载分类绑定品牌
            $.ajax({
                url: "{:url('Utils/queryBrandCategory')}",
                type: 'POST', //GET
                async: true,    //或false,是否异步
                data: {
                    category_id1: oneSelector.val()
                },
                timeout: 5000,    //超时时间
                dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                success: function (data, textStatus, jqXHR) {
                    $("#brand_container").empty();
                    $("input[name=brand_id]").val('');
                    if(data.length>0){
                        for (var i = 0; i < data.length; i++) {
                            if(data[i]['id']=='{$info.brand_id}'){
                                $("#brand_container").append("<span class='brand_tag brand_tag_active' data-content-id='"+data[i]['id']+"'>"+data[i]['title']+"</span>");
                                $("input[name=brand_id]").val(data[i]['id']);
                            }else{
                                $("#brand_container").append("<span class='brand_tag' data-content-id='"+data[i]['id']+"'>"+data[i]['title']+"</span>");
                            }

                        }

                    }

                },
                error: function (xhr, textStatus)
                {
                },
                complete: function ()
                {
                }
            })
        }
        else
        {
            //twoContainer.hide();
            //threeContainer.hide();
        }
    }
    //选择品牌
    $("body").on('click','.brand_tag',function () {
        var brand_id = $(this).attr('data-content-id');
        $("input[name=brand_id]").val(brand_id);
        $(".brand_tag").removeClass('brand_tag_active');
        $(this).addClass('brand_tag_active');
    });
    function changeTwo() {
        return true;
        if (twoSelector.val() != '')
        {
            $.ajax({
                url: "{:url('Utils/queryCategory')}",
                type: 'POST', //GET
                async: true,    //或false,是否异步
                data: {
                    parent_id: twoSelector.val()
                },
                timeout: 5000,    //超时时间
                dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                success: function (data, textStatus, jqXHR) {

                    threeContainer.show();
                    threeSelector.empty();
                    threeSelector.append("<option selected value=''>" + "请选择" + "</option>");
                    for (var i = 0; i < data.length; i++) {

                        if(data[i]['id']=='{$info.category_id3}'){
                            threeSelector.append("<option selected value='" + data[i].id + "'>" + data[i].title + "</option>");
                        }else{
                            threeSelector.append("<option value='" + data[i].id + "'>" + data[i].title + "</option>");
                        }
                    }

                }
            })
        } else {
            //threeContainer.hide();
        }
    }

    $(function () {
        $("#one-item").select2({
            placeholder: "选择一级分类",
            allowClear: true,
            width: "100%"
        });

        $("#two-item").select2({
            placeholder: "选择二级分类",
            allowClear: true,
            width: "100%"
        });

        // $("#three-item").select2({
        //     placeholder: "选择三级分类",
        //     allowClear: true,
        //     width: "100%"
        // });
        $("#presell").change(function () {
            let is_pre = $(this).val();
            if(is_pre == 0){
                $("#presell_selector").hide();
                $("input[name='presell_id']").val(0);
            }else{
                $("#presell_selector").show();
            }
        });

        $("#presell_container").on("click", ".pre_id", function () {
            $("input[name='presell_id']").val($(this).data("pre_id"));
            $(this).addClass("brand_tag_active1").siblings().removeClass("brand_tag_active1");
        });
    });
</script>




